<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>03_总结生命周期</title>
</head>
<body>
    
    <!-- 
            常用的生命周期钩子：
                1.mounted（已挂载）：发送 Ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化工作】。
                2.beforeDestroy（销毁前）：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

            关于销毁Vue实例
                1.销毁后借助Vue开发者工具看不到任何信息
                2.销毁后自定义的DOM事件会失效，但原生的DOM事件依然有效
                3.一般不会在beforeDestroy函数中操作数据，因为即便操作数据，也不会再出发更新流程了。
     -->


    <!-- 容器 -->
    <div id="root">
        <!-- <h2 :style="{opacity:clarity}">欢迎学习Vue</h2> -->
        <h2 :style="{opacity:clarity}">欢迎学习Vue</h2>
        <button @click="stop">停止变化</button>
        <button @click="setting">单击透明度为1</button>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

       let flag = 0 ;

      const vm = new Vue({
            el:'#root',
            data:{
                clarity:1,
            },
            // 方法
            methods:{
                stop(){
                    // 销毁Vue实例
                    this.$destroy();
                },
                setting(){
                    this.clarity = 1 
                }
            },
            // Vue 完成模板的解析并把初始的真实 DOM 元素放入页面后（挂载完毕） 调用 mounted函数
            mounted(){
                console.log('mounted=>挂载完毕');
               this.flag = setInterval(() => {
                    console.log('循环');
                    this.clarity -= 0.01 ;
                    if(this.clarity <= 0){
                        this.clarity = 1 ;
                    }
                }, 16);
            },
            // 销毁前
            beforeDestroy() {
                console.log('beforeDestroy=>销毁前');
                clearInterval(this.flag);
            },
            
        })
 
       
    </script>
</body>
</html>